<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <meta name="keywords" content="逗逼联盟,逗逼阅读,无广告,小说" th:content="${bookName+';'+catalogName}" />
    <meta name="description" content="做最简洁，最干净的小说聚合网站" th:content="${systemInfo.metaDescription}" />
    <title th:text="${'《'+(bookName==null?'未知名称':bookName)+'》-'+catalogName}">逗逼阅读-阅读器</title>
    <link rel="stylesheet" th:href="@{/css/home.css}" href="../../../static/css/home.css">
    <link rel="stylesheet" th:href="@{/css/reader.css}" href="../../../static/css/reader.css">
    <link rel="stylesheet" th:href="@{/css/custom_theme.css}" href="../../../static/css/custom_theme.css">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" href="../../../static/lib/layui/css/layui.css">
    <script th:replace="public/top::StatisticsJs"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body class="theme-0">
<script th:src="@{/js/home.js}" src="../../../static/js/home.js"></script>

<!-- 导航栏 -->
<div th:replace="public/top::header">

</div>

<!--阅读正文-->
<div class="layui-container" id="container">
    <div class="content content-wrap">
        <h2 class="catalog-name" th:text="${catalogName}" id="catalogName">章节标题</h2>

        <div class="reader-content" th:utext="${content}">
            &nbsp;&nbsp;&nbsp;&nbsp;“池瑶，我待你如挚爱，你为何要杀我？”<br>&nbsp;&nbsp;&nbsp;&nbsp;张若尘大吼一声，想前一扑，压得鎏金铸造的床榻“咯吱”一声，猛然坐了起来。<br>&nbsp;&nbsp;&nbsp;&nbsp
        </div>

    </div>
    <div class="layui-row content-wrap catalog-control">
        <span th:if="${preCatalog==null}" class="layui-col-xs4 layui-col-md4 layui-disabled">上一章</span>
        <a th:href="@{/book/reader(url=${preCatalog})}" th:if="${preCatalog!=null}" href="#"
           class="layui-col-xs4 layui-col-md4">上一章</a>
        <a target="_blank" th:href="@{/book/detail(url=${catalogs})}" href="#" class="layui-col-xs4 layui-col-md4 book-detail-catalogs">目录</a>
        <span th:if="${nextCatalog==null}" class="layui-col-xs4 layui-col-md4 layui-disabled">下一章</span>
        <a th:href="@{/book/reader(url=${nextCatalog})}" th:if="${nextCatalog!=null}" href="#"
           class="layui-col-xs4 layui-col-md4">下一章</a>
    </div>

    <!-- 设置 -->
<!--    <div class="layui-fixset layui-hide-xs">-->
    <div class="layui-fixset">
        <ul id="ui_setting" style="display: none;">
            <li class="layui-icon md-catalogs-open content-wrap"><i class="layui-icon">&#xe647;</i><br>目录</li>
            <li class="layui-icon md-setting-open content-wrap"><i class="layui-icon">&#xe614;</i><br>设置</li>
            <li class="layui-icon md-go-detail content-wrap"><i class="layui-icon">&#xe60a;</i><br>书页</li>
            <li class="layui-icon md-download content-wrap"><i class="layui-icon">&#xe601;</i><br>下载</li>
        </ul>

        <div class="reader-catalogs-md panel-wrap" style="display: none">
            <div class="layui-row">
                <i class="layui-col-xs-offset10 layui-col-xs2 layui-col-md-offset11 layui-col-md1 layui-icon md-catalogs-close">&#x1006;</i>
            </div>
            <div class="layui-row">
                <h3 class="layui-col-md12 reader-setting-top-title active">目录</h3>
            </div>
            <div class="layui-row">
                <hr class="layui-col-md1 layui-col-xs2">
            </div>

            <div class="layui-row catalog-list">
                <span class="active layui-col-md12 layui-col-xs12" id="catalogTips" style="text-align: center">正在加载中......</span>
            </div>

        </div>

        <div class="reader-setting-md panel-wrap" style="display: none">
            <div class="layui-row">
                <i class="layui-col-xs-offset10 layui-col-xs2 layui-col-md-offset11 layui-col-md1 layui-icon md-setting-close">&#x1006;</i>
            </div>
            <div class="layui-row">
                <h3 class="layui-col-md12 reader-setting-top-title">设置</h3>
            </div>
            <br>
            <br>
            <div class="layui-row">
                <div class="layui-col-xs3 layui-col-md3 md-setting-title">阅读主题</div>
                <div class="layui-col-xs9 layui-col-md9 layui-row">
                    <div class="layui-col-xs2 layui-col-md2  reader-theme">
                        <div class=" layui-circle theme-0 default">
                            <i class="layui-icon">&#xe605;</i>
                        </div>
                    </div>

                    <div class="layui-col-xs2 layui-col-md2  reader-theme">
                        <div class=" layui-circle theme-1 act">
                            <i class="layui-icon">&#xe605;</i>
                        </div>
                    </div>

                    <div class="layui-col-xs2 layui-col-md2  reader-theme">
                        <div class=" layui-circle theme-2 default">
                            <i class="layui-icon">&#xe605;</i>
                        </div>
                    </div>

                    <div class="layui-col-xs2 layui-col-md2  reader-theme">
                        <div class=" layui-circle theme-3 default">
                            <i class="layui-icon">&#xe605;</i>
                        </div>
                    </div>

                    <div class="layui-col-xs2 layui-col-md2  reader-theme">
                        <div class=" layui-circle theme-4 default">
                            <i class="layui-icon">&#xe605;</i>
                        </div>
                    </div>

                </div>
            </div>

            <br>

            <div class="layui-row">
                <div class="layui-col-xs3 layui-col-md3 md-setting-title">正文字体</div>
                <div class="layui-col-xs9 layui-col-md9 layui-row">
                    <div class="layui-col-xs10 layui-col-md10 layui-row md-setting-font-family">
                        <div class="layui-col-xs4 layui-col-md4 md-setting-font-family-btn md-setting-font-family-yahei default">雅黑
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 md-setting-font-family-btn md-setting-font-family-song default">宋体
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 md-setting-font-family-btn md-setting-font-family-kai default">楷书
                        </div>
                    </div>
                </div>
            </div>

            <br>

            <div class="layui-row">
                <div class="layui-col-xs3 layui-col-md3 md-setting-title">字体大小</div>
                <div class="layui-col-xs9 layui-col-md9 layui-row">
                    <div class="layui-col-xs10 layui-col-md10 layui-row md-setting-font-size">
                        <div class="layui-col-xs4 layui-col-md4 md-setting-font-size-btn md-setting-font-size-smaller">A-</div>
                        <span class="layui-col-xs4 layui-col-md4 md-setting-font-size-view">30</span>
                        <div class="layui-col-xs4 layui-col-md4 md-setting-font-size-btn md-setting-font-size-bigger">A+</div>
                    </div>
                </div>
            </div>

            <br>

            <div class="layui-row">
                <div class="layui-col-xs3 layui-col-md3 md-setting-title">行间距</div>
                <div class="layui-col-xs9 layui-col-md9 layui-row">
                    <div class="layui-col-xs10 layui-col-md10 layui-row md-line-height">
                        <div class="layui-col-xs4 layui-col-md4 md-setting-line-height-btn md-setting-line-height-smaller">-</div>
                        <span class="layui-col-xs4 layui-col-md4 md-setting-line-height-view">1.8</span>
                        <div class="layui-col-xs4 layui-col-md4 md-setting-line-height-btn md-setting-line-height-bigger">+</div>
                    </div>
                </div>
            </div>

            <br>

            <div class="layui-row">
                <div class="layui-col-xs3 layui-col-md3 md-setting-title">页面宽度</div>
                <div class="layui-col-xs9 layui-col-md9 layui-row">
                    <div class="layui-col-xs10 layui-col-md10 layui-row md-setting-font-size">
                        <div class="layui-col-xs4 layui-col-md4 md-setting-page-size-btn md-setting-page-size-smaller"><i
                                class="layui-icon">&#xe647;</i> -
                        </div>
                        <span class="layui-col-xs4 layui-col-md4 md-setting-page-size-view">100%</span>
                        <div class="layui-col-xs4 layui-col-md4 md-setting-page-size-btn md-setting-page-size-bigger"><i
                                class="layui-icon">&#xe647;</i> +
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <!--  滚动到顶部 -->
    <ul class="layui-fixbar content-wrap layui-hide-xs" style="right: auto;">
        <li class="layui-icon layui-fixbar-top" lay-type="top"
            style="display:none;color: #1a1a1a;background-color: rgba(0,0,0,0);">
        </li>
    </ul>
</div>
<input type="hidden" th:value="${currentUrl}" id="currentUrl">
<script th:src="@{/js/reader.js}" src="../../../static/js/reader.js"></script>
<script th:src="@{/lib/layui/layui.all.js}" src="../../../static/lib/layui/layui.all.js"></script>
</body>
</html>